<template>
  <el-form
    ref="formRef"
    :model="ResetPwd"
    :rules="resetrules"
    label-width="160px"
    label-position="left"
  >
    <el-form-item :label="$t('personal.AltesPasswort')" prop="oldPassword">
      <el-input
        v-model="ResetPwd.oldPassword"
        type="password"
        :placeholder="$t('personal.altesPasswortein')"
        show-password
      />
    </el-form-item>
    <el-form-item :label="$t('personal.NeuesPasswort')" prop="newPassword">
      <el-input
        v-model="ResetPwd.newPassword"
        type="password"
        :placeholder="$t('personal.neuesPasswortein')"
        show-password
      />
    </el-form-item>
    <el-form-item
      :label="$t('personal.Passwortbestätigen')"
      prop="confirmPassword"
    >
      <el-input
        v-model="ResetPwd.confirmPassword"
        type="password"
        :placeholder="$t('personal.Passworterneutein')"
        show-password
      />
    </el-form-item>
    <el-form-item style="margin-top: 2rem">
      <el-button v-throttle="submit" type="success" :loading="loading" plain>{{
        $t("personal.konservieren")
      }}</el-button>
      <el-button v-throttle="init" type="danger" plain>{{
        $t("personal.Zurücksetzen")
      }}</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
defineOptions({ name: "ResetPwd" });
import { PassWordx, PassWordxe } from "@/api/personal/types";
import type { FormRules } from "element-plus";
import { useUserStore } from "@/store/modules/user";
import { getUserForm } from "@/api/user";

const userStore = useUserStore();
// 获取表单
const formRef = ref(ElForm);
const loading = ref(false);

const ResetPwd = reactive<PassWordx>({
  username: "",
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const ResetData = reactive<PassWordxe>({
  username: "",
  oldPassword: "",
  newPassword: "",
});

// 获得 username
getUserForm(userStore.userId).then(({ data }) => {
  ResetPwd.username = data.username;
});
// 提交修改密码
function submit() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessageBox.confirm("确认更改密码?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        if (ResetPwd.newPassword === ResetPwd.confirmPassword) {
          loading.value = true;
          ResetData.username = ResetPwd.username;
          ResetData.newPassword = ResetPwd.newPassword;
          ResetData.oldPassword = ResetPwd.oldPassword;
          userStore
            .modifyPassWord(ResetData)
            .then((res) => {
              ElMessage.success(
                "密码修改成功,请牢记新密码: " + ResetPwd.newPassword
              );
            })
            .finally(() => {
              loading.value = false;
            });
        } else {
          // 清空两次密码
          ResetPwd.oldPassword = "";
          ResetPwd.confirmPassword = "";
          ElMessage.error("两次密码不同，请检查后重新输入！");
        }
      });
    }
  });
}

function init() {
  // 清空展板
  ResetPwd.newPassword = "";
  ResetPwd.oldPassword = "";
  ResetPwd.confirmPassword = "";
}

const resetrules = reactive<FormRules>({
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  confirmPassword: [
    { required: true, message: "请确认新密码", trigger: "blur" },
  ],
});
</script>

<style scoped>
.el-input {
  width: 50%;
}
</style>
